<script setup name="DurationMaintenance">
import { ref, reactive,onMounted } from "vue";
import { ElNotification } from 'element-plus';

const num = ref(1);
const dataSourceTableConst =ref([]);
 const rybmConst=ref({name: 'VxeSelect',options: []});  //人员编码
const value1=ref('');

//2.定义增删查改等方法
//2.1查询交易100095获取期间信息
const getDataSourceTableConstFun=async ()=>{
    const res = await window.xinpuHttpApi('100095',{"bh":num.value} );
    dataSourceTableConst.value=res.ReContent; 
    console.log(res.ReContent);
 }
const selectDataWeb1 = async () => {
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":  "xp_ry_001"});
  rybmConst.value.options=res.ReContent  ;
    
}


//2.2插入也就是点添加的时候在本地生成一年的数据
const insertFun=()=>{
  console.log(dataSourceTableConst.value.length);
    if( dataSourceTableConst.value.length==12){
        
        ElNotification.success({
        title: '失败',
        message: '已有12个月数据了',
        offset: 100,
      });
    }
    else{
      var a=getMonthDaysInYearFun(num.value);
      console.log(a);
      dataSourceTableConst.value=[];
        dataSourceTableConst.value.push(
        {id:null,rybm:'0000',qsrq:num.value+"-01-01 00:00:00",ny:num.value+'01',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-01-"+a[0] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-02-01 00:00:00",ny:num.value+'02',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-02-"+a[1] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-03-01 00:00:00",ny:num.value+'03',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-03-"+a[2] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-04-01 00:00:00",ny:num.value+'04',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-04-"+a[3] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-05-01 00:00:00",ny:num.value+'05',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-05-"+a[4] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-06-01 00:00:00",ny:num.value+'06',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-06-"+a[5] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-07-01 00:00:00",ny:num.value+'07',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-07-"+a[6] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-08-01 00:00:00",ny:num.value+'08',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-08-"+a[7] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-09-01 00:00:00",ny:num.value+'09',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-09-"+a[8] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-10-01 00:00:00",ny:num.value+'10',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-10-"+a[9] +" 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-11-01 00:00:00",ny:num.value+'11',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-11-"+a[10] + " 00:00:00"},
        {id:null,rybm:'0000',qsrq:num.value+"-12-01 00:00:00",ny:num.value+'12',xgrq:num.value+"-01-01 00:00:00",jzrq:num.value+"-12-"+a[11] + " 00:00:00"}
     ); 
    
    }
}
const getMonthDaysInYearFun=(year)=> {
  let days = [];
  for (let i = 0; i < 12; i++) {
    let date = new Date(year, i + 1, 0);
    days.push(date.getDate());
  }
  return days;
}
//2.3保存交易
const saveDataSourceTableConstFun=async ()=>{
     
 
      const res = await window.xinpuHttpApi('100096',{"list":dataSourceTableConst.value });
     
   
 }

//2.4删除交易
const deleteFun=async ()=>{
   
    const res1 = await window.xinpuHttpApi('100097',{"key":num.value+'01'} );
    const res2 = await window.xinpuHttpApi('100097',{"key":num.value+'02'} );
    const res3 = await window.xinpuHttpApi('100097',{"key":num.value+'03'} );
    const res4 = await window.xinpuHttpApi('100097',{"key":num.value+'04'} );
    const res5 = await window.xinpuHttpApi('100097',{"key":num.value+'05'} );
    const res6 = await window.xinpuHttpApi('100097',{"key":num.value+'06'} );
    const res7 = await window.xinpuHttpApi('100097',{"key":num.value+'07'} );
    const res8 = await window.xinpuHttpApi('100097',{"key":num.value+'08'} );
    const res9 = await window.xinpuHttpApi('100097',{"key":num.value+'09'} );
    const res10 = await window.xinpuHttpApi('100097',{"key":num.value+'10'} );
    const res11 = await window.xinpuHttpApi('100097',{"key":num.value+'11'} );
    const res12 = await window.xinpuHttpApi('100097',{"key":num.value+'12'} );
    getDataSourceTableConstFun();

 }

onMounted(()=>{
  num.value= new Date().getFullYear();
  getDataSourceTableConstFun();
  selectDataWeb1();
})
</script>

<template>
<div class="main-content">
    <div class="main-content-case">
        <div class="admin-top">
            <div class="admin-case-top">
            <div class="xpFont">选择年份</div>
            <el-input-number
                v-model="num"
                :min="2020"
                :max="2099"
                controls-position="right"
                style="height: 32px;width: 200px;margin-left: 8px;"
                @change="getDataSourceTableConstFun"
            />
          </div>
            
                 
        </div>
        <div class="line"></div>
        <div class="button-case">
          <div class="button-case-box" @click="insertFun()">
            <img
              src="../../../assets/images/add_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <div>新增</div>
          </div>
          <div class="button-case-box" >
            <img
              src="../../../assets/images/del_icon.png"
              style="width: 16px; height: 16px; margin-right: 2px"
              alt=""
              srcset=""
            />
            <el-popconfirm title="确认删除吗?"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="deleteFun()"
            @cancel="cancelEvent"
            >
              <template #reference>
                <div>删除</div>
              </template>
            </el-popconfirm>   
          </div>
          <div class="button-case-box"  > 
            <img
                src="../../../assets/images/save_icon.png"
                style="width: 16px; height: 16px; margin-right: 2px"
                alt=""
                srcset=""
                />
            <el-popconfirm title="确认保存吗?"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="saveDataSourceTableConstFun()"
            @cancel="cancelEvent"
            >
              <template #reference>
                <div>保存</div>
              </template>
            </el-popconfirm>   
          </div>    
              
        </div>
        <div class="table-case">
           <vxe-table
            ref="tableRef"
            border
            :columnConfig="{resizable: true}"
            :row-config="{isCurrent:true,isHover:true}"
            :edit-config="{mode: 'cell', trigger: 'click',showIcon:false}"
            :data="dataSourceTableConst"
            height= auto
            :scroll-y="{enabled: true, gt: 0}"  
            show-overflow
            
            @cell-click="cellClick"
           >
            
            <vxe-column type="seq" width="60"> 
            </vxe-column>
            <vxe-column field='ny'     title='年份'      width=200   :edit-render="{}">
              
             
            </vxe-column>
            <vxe-column field='qsrq'     title='起始日期'  width=200  :edit-render="{}">
              <template #edit="{ row }">
                <vxe-date-picker v-model="row.qsrq" placeholder="日期和时间选择" type="datetime"></vxe-date-picker>
              </template>
            </vxe-column>

            <vxe-column field='jzrq'   title='截止日期'  width=200  :edit-render="{}">
              <template #edit="{ row }">
                <vxe-date-picker v-model="row.jzrq" placeholder="日期和时间选择" type="datetime"></vxe-date-picker>
              </template>
            </vxe-column>
            <vxe-column field='rybm'   title='设置人员'  width=200  :edit-render=rybmConst>
            </vxe-column>
            <vxe-column field='xgrq'     title='修改日期'    width=200   :edit-render=xgrq> 
            </vxe-column>      
          </vxe-table> 
        </div>     
    </div>
</div>


</template>

<style lang="scss" scoped>
// :deep强制覆盖样式，提高!important优先级
:deep(::-webkit-scrollbar) {
    width: 10px !important;
    height: 10px !important;
}
// :deep强制覆盖样式，提高!important优先级
:deep(.vxe-cell--label) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-input--inner) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-cell--title) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight:400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
:deep(.vxe-select) {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight:400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}




.main-content{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;

  .main-content-case{
    width: 100%;
    height: 100%;
    background:#fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;

    .admin-top{
        display: flex;
        align-items: center;
        height: 32px;
        .admin-case-top {
            display: flex;
            align-items: center;
            margin-right: 16px;
        }
    }
    .line {
        width: 100%;
        height: 1px;
        background: #ebebeb;
        margin: 12px 0;
    }
    .button-case{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333333;
        padding: 10px 0px 10px 12px;
        height: 40px;
        border: 1px solid #EBEBEB;
        .button-case-box {
            display: flex;
            align-items: center;
            margin-right: 12px;
            cursor: pointer; /* 可选：使光标变为指针，表示可点击 */
        }
    }
    .table-case{
        width: 100%;
        height: calc(100% - 97px);
       
    } 
  }
}
.xpFont{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
}
.xpFontSyzt{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>